<template>
  <el-dialog
    :title="isEdit ? '修改' : '新增'"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
    customClass="customWidth"
  >
    <el-form :model="ruleForm" ref="ruleForm" label-width="200px">
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="工作面名称" prop="FaceName">
            <el-select v-model="ruleForm.FaceName">
              <el-option
                v-for="item in gzmName"
                :key="item.gzmname"
                :label="item.gzmname"
                :value="item.gzmname"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="进尺类型" prop="RijinType">
            <el-select v-model="ruleForm.RijinType">
              <el-option
                v-for="item in jinchiType"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="作业日期" prop="StarTime">
            <div class="block">
              <el-date-picker
                v-model="ruleForm.StarTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="日进尺" prop="DailyFootages">
            <el-input v-model="ruleForm.DailyFootages"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="累计进尺" prop="CumulativeFootage">
            <el-input v-model="ruleForm.CumulativeFootage"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import {
  jinchiadd,
  jinchixiu,
  dingbanpeizhigongzuomianlist,
} from "../../../https/api/user";
const ruleForm = {
  FaceName: "",
  RijinType: "",
  DailyFootages: "",
  CumulativeFootage: "",
  StarTime: "",
 
};
export default {
  data() {
    return {
      dialogVisible: false,
      ruleForm,
      isEdit: false,
      loading: false,

      gzmName: [],
      jinchiType: [{ value: "掘进进尺" }, { value: "回采进尺" }],
    };
  },
  mounted() {
    this.Onlist1();
  },
  methods: {
    Onlist1() {
      dingbanpeizhigongzuomianlist().then((res) => {
        console.log("工作面信息", res);
        if (res) {
          this.gzmName = res;
        } else {
          alert("暂无数据");
        }
      });
    },
    show(data) {
      this.isEdit = !!data;
      this.ruleForm = data || ruleForm;
      this.dialogVisible = true;
    },
    async save() {
      const api = this.isEdit ? jinchixiu : jinchiadd;
      try {
        this.loading = true;
        const result = await api(this.ruleForm);
        const message = this.isEdit ? "修改成功！" : "添加成功！";
        Message({
          message,
          type: "success",
        });
        this.$parent.Onlist();
        this.dialogVisible = false;
        this.$refs.ruleForm.resetFields();
        console.log(">>>>", result);
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    handleClose(done) {
      // this.$confirm('确认关闭？')
      // .then(_ => {
      done();
      // })
      // .catch(_ => { });
    },
  },
};
</script>

<style scoped lang="less">
.el-select {
  width: 100%;
}
.customWidth {
  width: 30% !important;
  min-width: 100px !important;
}
</style>